<template>
  <div class="list">
    <el-table :data="tableData.records"
              style="width: 100%"
              border>
      <el-table-column prop="id"
                       label="序号"
                       width="100">
      </el-table-column>
      <el-table-column prop="name"
                       label="优惠卷名称"
                       width="100">
      </el-table-column>
      <el-table-column prop="batchCode"
                       label="优惠卷编码"
                       width="180">
      </el-table-column>
      <el-table-column prop="denomination"
                       label="优惠卷面额"
                       width="100">
      </el-table-column>
      <el-table-column prop="amount"
                       label="数量"
                       width="50">
      </el-table-column>
      <el-table-column prop="createDate"
                       label="创建时间"
                       width="180">
      </el-table-column>
      <el-table-column label="状态"
                       width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status=='CREATE'"
                  type="">{{scope.row.status | formatterStatus}}</el-tag>
          <el-tag v-if="scope.row.status=='PUSH'"
                  type="danger">{{scope.row.status | formatterStatus}}</el-tag>
          <el-tag v-if="scope.row.status=='UNATIVE'"
                  type="info">{{scope.row.status | formatterStatus}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     :disabled="scope.row.status == 'PUSH'?true:false"
                     @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handlePush(scope.row.id)">发行</el-button>
          <el-button size="mini"
                     type="info"
                     @click="handleDelete(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import { queryList, push } from '@/api/BatchCoupon'
export default {
  data () {
    return {
      tableData: [],
      queryFrom: { page: 1, size: 5 }
    }
  },
  filters: {
    formatterStatus (val) {
      if (val === 'CREATE') {
        return '创建';
      } else if (val === 'PUSH') {
        return '发行';
      } else if (val === 'UNATIVE') {
        return '失效';
      }
    }
  },
  created () {
    this.list();
  },
  methods: {
    list () {
      queryList(this.queryFrom).then((res) => {
        this.tableData = res.data
        console.log(res);
      })
    },
    handleEdit (id) {
      this.$parent.$refs.openDia.open('update', id)
    },
    handlePush (id) {
      push({ id: id }).then(res => {
        this.$message({
          message: res.msg,
          type: "success"
        })
        this.list()
      })
    }
  }

}
</script>

<style lang="sass" scoped>
.list
  margin-top: 20px
</style>